{% extends 'index/index.html' %}

{% block add_note %}

    <div class="layui-form">
        <div class="layui-form-item">
            <div class="layui-input-block">
                <input type="text" name="title" id="title" required lay-verify="required" placeholder="请输入标题"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <div id="editor—wrapper">
                    <div id="toolbar-container"><!-- 工具栏 --></div>
                    <div id="editor-container"><!-- 编辑器 --></div>
                </div>
                <textarea name="content" id="content" class="layui-input layui-hide"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" id="btn-save">保存</button>
                <button class="layui-btn layui-btn-primary" id="btn-cancel">取消</button>
            </div>
        </div>
    </div>

    <script>
        $(document).ready(function () {
            const {createEditor, createToolbar} = window.wangEditor
            const server_url = 'http://localhost:8000'
            layui.use('layer');
            var layer = layui.layer;

            const editorConfig = {
                placeholder: 'Type here...',
                onChange(editor) {
                    const html = editor.getHtml()
                    // 也可以同步到 <textarea>
                    document.getElementById('content').value = html

                }
            }

            editorConfig.MENU_CONF = {}
            editorConfig.MENU_CONF['uploadImage'] = {
                fieldName: 'image',
                base64LimitSize: 10 * 1024, // 10kb
                server: server_url + '/upload/pic/',

            }
            editorConfig.MENU_CONF['insertImage'] = {
                parseImageSrc: (src) => {
                    if (src.indexOf("http") !== 0) {
                        // console.log(`${server_url}${src}`);
                        return `${server_url}media${src}`
                    }
                    return src
                }
            }

            const editor = createEditor({
                selector: '#editor-container',
                html: '<p><br></p>',
                config: editorConfig,
                mode: 'simple',
            })

            const toolbarConfig = {excludeKeys: ["uploadVideo"]}

            const toolbar = createToolbar({
                editor,
                selector: '#toolbar-container',
                config: toolbarConfig,
                mode: 'simple', //
            })

            $('#btn-cancel').on('click', () =>{
                window.location.assign('/user/notes');
            })

            $('#btn-save').on('click', async () => {
                var title = $('#title').val();
                var content = $('#content').val();
                var data = new FormData();
                if (!title){
                    layer.msg('标题不能为空')
                    return
                }
                data.append('title', title);
                data.append('content', content);
                let res = await axios.post('/note/add/', data);
                layer.msg(res.data.msg)
                if (res.data.code === 200) {
                    setTimeout(function () {
                        window.location.assign('/user/notes');
                    }, 500)

                }


            })


        })


    </script>

{% endblock %}